<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑收货地址</title>
    <meta charset="UTF-8">
    <title>编辑收货地址</title>
    <meta name="keywords" content="编辑收货地址"/>
    <meta name="description" content="编辑收货地址"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,viewport-fit=cover">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" >
    <link rel="stylesheet" th:href="@{/style/admin.css}" >
    <!--<link th:href="@{/shoppingApi/css/public.css}" rel="stylesheet">-->
    <!--<link th:href="@{/shoppingApi/css/publicOfuser.css}" rel="stylesheet">-->
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header"  th:content="${_csrf.headerName}"/>
    <link th:href="@{/shoppingApi/css/weui.min.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/jquery-weui.min.css}" rel="stylesheet">
    <style type="text/css">
        /*html, body { background: #fff; }*/
        .product-price{
            width:50px;
            border: none;
        }
        #editor{
            margin-left: 120px;
        }
        .one-img{
            border: 1px solid red;
            height: 100px;
            width: 100px;
            margin-left: 110px;
        }
        .Fengetext{
            color: red;
        }
        .layui-card-header .layui-icon {
            line-height: initial;
            position: absolute;
            right: 0px;
            top: 50%;
            margin-top: -15px;
        }
        .upaction{
            background: red;
        }

        .addproduct{
            background: #1aad19;
            display: block;
            width: 100%;
            height: 46px;
            line-height: 46px;
            font-size: 18px;
        }
        .layui-form-label {
            width: 80px;
            font-size: 16px;
            text-align: left;
            padding: 9px 0;
        }
        .layui-input-block { margin-left: 80px; }
        .layui-select-block {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .layui-select-inline { display: block!important; margin: 0 0 0 10px!important; left: 0!important; }
        .layui-select-inline:nth-child(1) { margin: 0!important; }
        .layui-form-switch { margin-top: 0; }
        .fixed-address {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 16px;
            color: #fff;
            background-color: #F70029;
            z-index: 10;
        }
        .layui-form-onswitch {
            border-color: #f7012a;
            background-color: #f7012a;
        }
    </style>
</head>
<body>

<div class="layui-fluid" style="padding:0;">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">

                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text" th:value="${address.address.name}" id="name" name="name" autocomplete="off" placeholder="请输入姓名"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">电话</label>
                    <div class="layui-input-block">
                        <input type="text" id="phone" th:value="${address.address.phone}"  name="phone" autocomplete="off"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-block">
                        <label style="color: #8D8D8D;" data="0" id="address" disabled="disabled"  th:adid="${address.address.provinceId+','+address.address.cityId+','+address.address.areaId}" th:text="${address.address.provinceName+address.address.cityName+address.address.areaName}" name="address" autocomplete="off"    class="layui-input1"></label>
                        <!--<input type="text" data="0" id="address" disabled="disabled"  th:adid="${address.address.provinceId+','+address.address.cityId+','+address.address.areaId}" th:value="${address.address.provinceName+address.address.cityName+address.address.areaName}" name="address" autocomplete="off" placeholder="请输入地址"   class="layui-input">-->
                    </div>
                </div>
                <div class="layui-form-item">
                    <form name="form" class="form">
                        <label class="layui-form-label">选择地址</label>
                        <div class="layui-input-block layui-select-block">
                            <div class="layui-input-inline layui-select-inline">
                                <select name="quiz1" id="yj"  lay-verify="required"   lay-filter="selectyj">
                                    <!--<option value="0">请选择省份</option>-->
                                </select>
                            </div>
                            <div class="layui-input-inline layui-select-inline">
                                <select name="quiz2" id="rj" lay-filter="selectrj">
                                </select>
                            </div>
                            <div class="layui-input-inline layui-select-inline" >
                                <select name="quiz3" id="sj" lay-filter="selectsj">
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">详细地址</label>
                    <div class="layui-input-block">
                        <input type="text" id="detailAddress" th:value="${address.address.detailAddr}" name="detailAddress" autocomplete="off" placeholder="请输入详细地址"   class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">默认地址</label>
                    <div class="layui-input-block">
                        <input th:if="${address.address.isdefault==1}" checked="checked" type="checkbox" name="marriage" id="isDefault" lay-skin="switch" lay-text="是|否">
                        <input th:if="${address.address.isdefault==0}"  type="checkbox" name="marriage" id="isDefault" lay-skin="switch" lay-text="是|否">
                    </div>

                </div>
            </div>
        </div>


    </div>
</div>

<!--<div class="layui-form-item">-->
    <!--<div style="margin: 10px;">-->
        <!--<button class="layui-btn addproduct" id="sure" th:data="${address.address.id}" lay-submit="" lay-filter="demo1" onclick="saveArea(this)">保存</button>-->
    <!--</div>-->
<!--</div>-->
</div>
</div>
<button class="layui-btn addproduct fixed-address" id="sure" th:data="${address.address.id}" lay-submit="" lay-filter="demo1" onclick="saveArea(this)">保存</button>
</body>
<!--<script th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>-->
<script th:src="@{/layui/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/shoppingApi/js/jquery-weui.min.js}"></script>

<script>
    var header = $("meta[name='_csrf_header']").attr("content");
    var token =$("meta[name='_csrf']").attr("content");
    function isPoneAvailable(poneInput) {
        var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!myreg.test(poneInput)) {
            return false;
        } else {
            return true;
        }
    }
    function saveArea(obj) {
        var id=$(obj).attr('data');
        var adids=$.trim($("#address").attr('adid'));
        var name=$("#name").val();
        var phone=$("#phone").val().replace(/\s+/g,"");
        var address=$.trim($("#address").attr('data'));
        var length1=address.split(',').length;
         //alert(address.split(',')[0]+"aa"+address.split(',').length);
        if (!phone) {
            $.toast("请输入手机号", "cancel");
            return;
        }
        if(!isPoneAvailable(phone)){
            $.toast("请输入正确的手机号", "cancel");
            return;
        }
        if(address.split(',')[0]==0&&length1==1){
            address=adids;
        }else if(length1!=3&&length1>0) {
            $.toast("请选择完地址(省-市-区)", "cancel");
            return;
        }
        var detailAddress=$("#detailAddress").val();
        var ischecked=$("#isDefault").is(":checked");
        var isdefault=0;
        if(ischecked==true){
            isdefault=1;
        }
        if(name==""||phone==""){
            $.toast("地址信息不完整!", "cancel");
            return;
        }
        //alert(id+"---"+name+"---"+phone+"---"+address+"---"+detailAddress+"---"+ischecked+"---");return;
        $.ajax({
            type: 'get',
            url: '/wap/addressAddOrEdit?id='+id+"&addressIds="+address+"&detailAddress="+detailAddress+"&name="+name+"&phone="+phone+"&isdefault="+isdefault,
            success: function (data) {
                if(data.data>0){
                    $.toast("修改成功",500, function() {
                        if(data.errorDetail!=null&&data.errorDetail!=""&&data.errorDetail!="null"){
                            window.location.href=data.errorDetail;
                        }else {
                            window.location.href='/wap/myAddress';
                        }
                    });
                }else {
                    if(data.data==-1){
                        $.toast("地址信息不完整，失败", 'cancel');
                    }else {
                        $.toast("保存失败", 'cancel');
                    }
                }
            }
        });

        // $.ajax({
        //     url: '/wap/addressAddOrEdit?id='+id+"&addressIds="+address+"&detailAddress="+detailAddress+"&name="+name+"&phone="+phone+"&isdefault="+isdefault,
        //     type: 'get',
        //     dataType: 'json',
        //     contentType: 'application/json',
        //     async: false,
        //     success: function(data){
        //         if(data.data>0){
        //             $.toast('修改成功！', 'text');
        //             //跳转到地址列表
        //             //window.location.href='/wap/myAddress';
        //             if(data.errorDetail!=null&&data.errorDetail!=""){
        //                 alert(1);
        //                 window.location.href=data.updateAddressURL;
        //             }
        //         }else {
        //             alert("修改失败!");
        //         }
        //     },
        //     beforeSend : function(xhr) {
        //         xhr.setRequestHeader(header, token);
        //     }
        // });
    }

    var sjId;
    var provinceName="",cityName="",areaName="";
    var provinceId=0,cityId=0,areaId=0;
    $(document).ready(function(){

        layui.use('form', function(){
            var form = layui.form;
            form.on('select(selectyj)', function(data){

                var yjId=data.value;
                loadrj(yjId)//调用二级
                provinceName=data.elem[data.elem.selectedIndex].text;
                provinceId=yjId+",";
                $("#address").attr('data',provinceId);
            });
            form.render();
            form.on('select(selectrj)', function(data){

                var rjId=data.value;
                loadsj(rjId);
                cityName=data.elem[data.elem.selectedIndex].text;
                cityId=rjId+",";
                $("#address").attr('data',cityId);
            });
            form.render();

            form.on('select(selectsj)', function(data){

                sjId=data.value;
                areaName=data.elem[data.elem.selectedIndex].text;
                areaId=sjId;
                $("#address").html(provinceName+cityName+areaName);
                $("#address").attr('data',provinceId+cityId+areaId)
            });
            form.render();
        });
        var date=new Date();
        var year=date.getFullYear();
        var productNo=Math.random().toString().substring(2);
        var str=year.toString()+productNo;
        $("#productNo").attr("value",str);
    });



</script>

<script>
    var addressid=$("#address").attr("adid");
    var a1=$.trim(addressid.split(',')[0]);
    var a2=$.trim(addressid.split(',')[1]);
    var a3=$.trim(addressid.split(',')[2]);

    $(document).ready(function () {
        loadProvince();
        loadrj(a1);
        loadsj(a2);
    })

    function loadProvince() {
        var str = "";
        $.ajax({
            url:"/selectAreaList?parentId=0&level=0",
            dataType: 'json',
            contentType: 'application/json',
            async: false,
            success: function (result) {
                var data=result;
                for(var index in data){
                    if(data[index].id==a1){
                        var yjId=a1;
                        provinceName=data[index].name;
                        provinceId=yjId+",";
                        $("#address").attr('data',provinceId);
                        str +="<option selected='selected'  value='" +data[index].id+ "'>" + data[index].name+ "</option>";
                    }else {
                        str +="<option value='" +data[index].id+ "'>" + data[index].name+ "</option>";
                    }
                }
            }
        });
        $("#yj").html(str);
        layui.use('form', function() {
            var form = layui.form;
            form.render();
        })
    }

    function loadrj(id) {
        var  str="";
        $.ajax({
            async: false,
            url:"/selectAreaList?level=1&parentId="+id,
            success:function (result) {
                var data=result;
                $('#rj').empty();
                $('#sj').empty();
                str +="<option value='0'>请选择</option>";
                for(var index in data){
                    if(data[index].id==a2){
                        var rjId=a2;
                        cityName=data[index].name;
                        cityId=rjId+",";
                        $("#address").attr('data',cityId);

                        str +="<option selected='selected'  value='" +data[index].id+ "'>" + data[index].name+ "</option>";
                    }else {
                        str +="<option value='" +data[index].id+ "'>" + data[index].name+ "</option>";
                    }
                }
            }
        });
        $("#rj").html(str);
        layui.use('form', function() {
            var form = layui.form;
            form.render();
        })
    }

    function loadsj(id) {
        var  str="";
        $.ajax({
            async: false,
            url:"/selectAreaList?level=2&parentId="+id,
            success:function (result) {
                var data=result;
                $('#sj').empty();
                str +="<option value='0'>请选择</option>";
                for(var index in data){
                    if(data[index].id==a3){
                        str +="<option selected='selected'  value='" +data[index].id+ "'>" + data[index].name+ "</option>";
                    }else {
                        str +="<option value='" +data[index].id+ "'>" + data[index].name+ "</option>";
                    }
                }
            }
        });
        $("#sj").html(str);
        layui.use('form', function() {
            var form = layui.form;
            form.render();
        })
    }
</script>
</html>